<template>
  <view class="team-container">
    <view class="header-container">
      <view class="right-bg"></view>
      <view class="search-container">
        <view class="team-tab">
          <view
            class="team-tab-item"
            :class="{
              'active-item': orderDetailType === '1'
            }"
            @click="changeDetailType('1')">广告收益</view>
          <view
            class="team-tab-item"
            :class="{
              'active-item': orderDetailType === '2'
            }"
            @click="changeDetailType('2')">支付收益</view>
        </view>
        <view class="sort text-overflow" @click="showSort = true">
          <text>{{ monthStr }}</text>
          <u-icon class="arrow-down" name="arrow-down" color="#333" size="24"></u-icon>
        </view>
      </view>
      <view class="data-container">
        <view class="data-item">
          <view class="data-num">{{ totalRevenue }}</view>
          <view class="data-name">总收益</view>
        </view>
        <view class="data-item">
          <view class="data-num">{{ playEarning }}</view>
          <view class="data-name">已到账</view>
        </view>
      </view>
    </view>
    <view class="tip">团队成员下级分成收益信息</view>
    <Title title="明细列表" :custom-style="{
      'marginBottom': '32rpx',
      'marginTop': '32rpx',
      'fontSize': '32rpx',
      'fontWeight': '700',
      'color': '#333'
    }"></Title>
    <!-- 明细 -->
    <view v-if="orderEarningDetailListData && orderEarningDetailListData.length > 0" class="members-container">
      <view
        v-for="(item, index) in orderEarningDetailListData"
        :key="index"
        class="earning-item">
        <view class="item-title">
          <view class="date-time">{{ item.date }}</view>
          <view class="earining-data">实际收益：<text class="total-num">{{ item.total_final_commission_amount }}</text></view>
        </view>
        <view class="earning-detail-info">
          <view class="earning-detail-item">
            <view class="item-name">{{ orderDetailType === '1' ? '下载总数' : '支付笔数' }}</view>
            <view class="item-num">{{ item.download_count }}</view>
          </view>
          <view class="earning-detail-item">
            <view class="item-name">预估收益</view>
            <view class="item-num">{{ parseFloat(item.total_initial_commission_amount || 0).toFixed(4) }}</view>
          </view>
          <view class="earning-detail-item">
            <view class="item-name">实际收益</view>
            <view class="item-num">{{ parseFloat(item.total_final_commission_amount || 0).toFixed(4) }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty">
      <image
        style="width: 350rpx;height: 350rpx;"
        src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"
        mode="scaleToFill"
      />
      <view class="empty-tips">
        <text>暂无数据</text>
      </view>
    </view>
    <!-- 选择排序 -->
    <u-picker
      v-model="showSort"
      mode="time"
      :params="{
        year: true,
				month: true,
      }"
      range-key="name"
      :end-year="endYear"
      :default-time="month"
      @confirm="confirm"
      z-index="90"></u-picker>
  </view>
</template>

<script>
  import Title from '@/components/title/title';
  import { totalGroupRevenue, groupOrderEarningDetailList } from '@/api/artworks';
  import { parseTime } from '@/utils/parseTime';
  export default {
    components: {
      Title
    },
    data() {
      return {
        showSort: false,
        month: '',
        monthStr: '',
        playEarning: 0,
        totalRevenue: 0,
        endYear: new Date().getFullYear(),
        orderEarningDetailListData: [],
        orderDetailType: '1'
      }
    },
    onLoad() {
      this.month = parseTime(new Date(), '{y}-{m}-{d}');
      this.monthStr = parseTime(new Date(), '{y}年{m}月');
      this.getTotalRevenue();
      this.getOrderEarningDetailList();
    },
    methods: {

      // 获取收益统计
      getTotalRevenue() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        totalGroupRevenue({
          month: this.month,
          orderDetailType: this.orderDetailType
        }).then(result => {
          uni.hideToast();
          if (result && result.data) {
            this.playEarning = parseFloat(result.data.playEarning || 0).toFixed(2);
            this.totalRevenue = parseFloat(result.data.totalRevenue || 0).toFixed(2)
          } else {
            this.playEarning = 0;
            this.totalRevenue = 0;
          }
        }).catch(() => {
          uni.hideToast();
        })
      },

      // 获取收益订单明细
      getOrderEarningDetailList() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        groupOrderEarningDetailList({
          month: this.month,
          orderDetailType: this.orderDetailType
        }).then(result => {
          uni.hideToast();
          if (result && result.data) {
            let list = result.data;
            this.orderEarningDetailListData = list;
          } else {
            this.orderEarningDetailListData = [];
          }
        }).catch(() => {
          uni.hideToast();
        })
      },

      // 列改变、
      confirm(val) {
        const year = val['year'];
        const month = val['month'];
        this.month = `${year}-${month}-01`;
        this.monthStr = parseTime(new Date(`${year}-${month}-01`), '{y}年{m}月');
        this.getTotalRevenue();
        this.getOrderEarningDetailList();
      },

      // 切换明细列表
      changeDetailType(type) {
        this.orderDetailType = type;
        this.getOrderEarningDetailList();
        this.getTotalRevenue();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .team-container{
    padding: 24rpx;

    .tip{
      padding-top: 24rpx;
      font-size: 24rpx;
      color: #888;
    }
  }
  .header-container{
    background: linear-gradient(-90deg, $uni-color-primary, $uni-color-primary2);
    position: relative;
    width: 100%;
    opacity: .8;
    z-index: 1;
    padding: 24rpx;
    border-radius: 16rpx;
    height: 288rpx;

    .right-bg{
      position: absolute;
      top: 0;
      right: 0;
      width: 40%;
      z-index: -1;
      height: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
      // background-image: url('https://qiniu-res.jintianwang.cc/20221113175255-page-bg.eb3254be.png');
    }

    .search-container{
      display: flex;

      .tatal-earning{
        flex: 1;
        height: 64rpx;
        border-radius: 32rpx;
        margin-right: 24rpx;
        display: flex;
        align-items: center;
        padding: 0 4rpx;
        color: #fff;

        .total-earning{

        }

        .unit {
          font-size: 24rpx;
          margin-right: 4rpx;
        }

        .total-amount{
          display: flex;
          align-items: center;
        }

        .amount-text{
          font-weight: bold;
        }
      }

      .data-container{
        display: flex;
        align-items: center;
        text-align: center;
        margin-top: 40rpx;

      .data-item{
        flex: 1;

        .data-name{
          color: #fff;
          font-size: 28rpx;
        }

        .data-num{
          color: #fff;
          font-size: 44rpx;
          margin-bottom: 12rpx;
          font-weight: bold;
        }
      }

      .data-item:nth-child(1) {
        border-right: 1rpx solid #fff;
      }
    }

      .sort{
        width: 200rpx;
        background: #fff;
        height: 64rpx;
        border-radius: 32rpx;
        font-size: 24rpx;
        line-height: 64rpx;
        text-align: center;
        padding: 0 40rpx 0 24rpx;
        position: relative;

        .arrow-down{
          position: absolute;
          right: 20rpx;
          top: 0;
          bottom: 0;
        }
      }
    }

    .team-tab{
      flex: 1;
      background: #fff;
      height: 64rpx;
      border-radius: 32rpx;
      margin-right: 24rpx;
      display: flex;
      align-items: center;
      padding: 0 4rpx;
      
      .team-tab-item{
        height: 58rpx;
        background: transparent;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: #333;
        line-height: 58rpx;
        transition: .2s;
        text-align: center;
        padding: 0 24rpx;
        flex: 1;
      }
      .all{
        width: 120rpx;
        padding: 0;
      }
      .active-item{
        color: #fff;
        background: linear-gradient(-90deg, $uni-color-primary, $uni-color-primary2);
      }
    }

    .data-container{
      display: flex;
      align-items: center;
      text-align: center;
      margin-top: 40rpx;

      .data-item{
        flex: 1;

        .data-name{
          color: #fff;
          font-size: 28rpx;
        }

        .data-num{
          color: #fff;
          font-size: 44rpx;
          margin-bottom: 12rpx;
          font-weight: bold;
        }
      }

      .data-item:nth-child(1) {
        border-right: 1rpx solid #fff;
      }
    }

  }

  .members-container{
    .earning-item{
      padding: 24rpx;
      border-radius: 16rpx;
      box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
      align-items: center;
      margin-bottom: 24rpx;
      color: #333;

      .item-title{
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .date-time{
          font-size: 28rpx;
          font-weight: bold;
        }

        .earining-data{
          font-size: 28rpx;
          font-weight: bold;
        }

        .total-num{
          color: rgb(239, 34, 34);
          font-weight: bold;
        }
      }

      .earning-detail-info{
        display: flex;
        background: #f3f7fb;
        align-items: center;
        text-align: center;
        padding: 24rpx;
        border-radius: 16rpx;

        .earning-detail-item{
          flex: 1;
        }

        .item-name{
          font-size: 24rpx;
          margin-bottom: 12rpx;
        }

        .item-num{
          font-size: 24rpx;
          color: $uni-color-primary;
        }
      }
    }
  }
  .empty{
    text-align: center;
  }
</style>
